<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO 8859-1" />
	<title>Pruebas CelisSkills</title>
	<link href='<c:url value="/css/Estilos.css"/>' rel="stylesheet" type="text/css" />
	<script type="text/javascript" src='<c:url value="/js/prototype.js"/>'></script>
	<script>
	function logon() {
		$('loginError').hide();
		new Ajax.Request('/app/seguridad/ajax/login', 
	     	{ method: 'post',
	    	parameters: $('form').serialize(true), 
	    	encoding: 'ISO-8859-1',
	    	onSuccess: function(transport) {
	    		alert(transport);
	    		alert(transport.responseText);
				    var json = transport.responseText.evalJSON(true);
				alert(json);
				    if (json.result == 'success'){
						document.location.reload();
					}else{
				     	$('loginError').show();
				    }
			  	}
			});
	}
	</script>
</head>
<body class="body"> 
<div id="content">
<p>&nbsp;</p>
<div align="center" class="body">
<form method="post" name="form" id="form" onsubmit="logon(); return false;">
<input type="hidden" name="redirectUrl" value="/cs${redirectUrl}"/>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="35%"><img src="/imagenes/loggeo1.gif" width="100%" height="452" /></td>
    <td width="2%"><img src="/imagenes/loggeo2.gif" width="216" height="452" /></td>
    <td width="26%"><div id="loggeoBackground">
    <br><br><br><br>  
      <table width="100%" border="0">
        <tr>     
          <td><p align="center"><img src="/imagenes/loggeo3.gif" width="280" height="105" /></p></td>     
        </tr>
         <tr>     
          <td height="10"></td>     
        </tr>
        <tr>
          <td>
            <table width="100%" border="0" align="center">
              <tr>
                <td width="43%"><div align="right"><span class="texto">Usuario:</span> : </div></td>
                <td width="57%">                  
                     <input type="text" name="login" id="login" />                </td>
              </tr>
              <tr>
                <td><div align="right" class="texto">Contraseña: </div></td>
                <td><input type="password" name="password" id="password" /></td>
              </tr>
              <tr>
                <td height="20" colspan="2"></td>             
              </tr>
              <tr>
                <td colspan="2"><div align="center">
				  <div id="loginError" style="color: red; display: none;">Usuario o contraseña inválidos</div>
                  <input name="btIngreso" type="submit" class="boton" value="Aceptar" />
                </div></td>             
              </tr>
            </table><p align="center">&nbsp;</p></td>
        </tr>
      </table>
    </div></td>
    <td width="2%"><img src="/imagenes/loggeo5.gif" width="240" height="452" /></td>
    <td width="35%"><img src="/imagenes/loggeo1.gif" width="100%" height="452" /></td>
  </tr>
</table>
</form>
</div>
<p>&nbsp;</p>
</div>
</body>
</html>
